<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <my-header @addTodo="addTodo"/>
                <!-- <my-list :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/> -->
                <!-- 利用全局事件总线 -->
                <my-list :todos="todos"/>
                <my-footer :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
                

            </div>

        </div>
        
    </div>

</template>

<script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter.vue'
import pubsub from 'pubsub-js'

export default {
    name:'App',
    components:{MyHeader,MyList,MyFooter},
    data(){
    return{
        todos:JSON.parse(localStorage.getItem('todos')) || []
        }
    },
    mounted(){
        this.$bus.$on('checkTodo',this.checkTodo)
        this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
    },
    methods:{
        addTodo(todoObj){
            // console.log('我是App组件，我收到了数据：',x)
            this.todos.unshift(todoObj)
        },
        // 勾选取消勾选
        checkTodo(id){
            this.todos.forEach((todo)=>{
                if(todo.id===id) todo.done = !todo.done
            })
        },
        // 删除todo项
        deleteTodo(_,id){
            this.todos = this.todos.filter((todo)=>{{
                return todo.id !== id
            }})
        },
        // 全选或者取消全选
        checkAllTodo(done){
            this.todos.forEach((todo)=>{
                todo.done = done
            })
        },
        // 清除所有已经完成的Todo
        clearAllTodo(){
            this.todos = this.todos.filter((todo)=>{
                return !todo.done
            })
        }
    },
    beforeDestroy(){
        this.$bus.$off('checkTodo')
        pubsub.unsubscribe(this.pubId)
    },
    watch:{
        todos:{
            deep:true,
            handler(value){
                localStorage.setItem('todos',JSON.stringify(value))
            }
        }
    }
    
}
</script>
<style>
    body{
        background:#fff;
    }

    .btn{
        display: inline-block;
        padding:4px 12px;
        margin-bottom: 0;
        font-size:14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.2), 0 1px 2px rgba(0,0,0,0.05);
        border-radius: 4px;
    }
    .btn-danger{
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
    .btn-danger:hover{
        color:#fff;
        background-color: #bd362f;
    }
    .btn:focus{
        outline: none;
    }
    .todo-container{
        width:600px;
        margin:0 auto;
    }
    .todo-container .todo-wrap{
        padding:10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

   
    
</style>